import client_bg from '@/assets/cover_bg.jpeg'
import useCoverStatus from '@/components/virtual/context/useCoverStatus'
import { useCabinet } from '@/stores/cabinet'
import { defineComponent, h, onUnmounted, ref } from 'vue'
import Client from './components/client'
import simulation from './components/map/index'
import Cover from './views/cover'

export default defineComponent({
  components: {
    Cover,
    Client,
    simulation,
  },
  setup() {
    const coverStatus = useCoverStatus()
    const showCover = ref(coverStatus.getCoverStatus())
    onUnmounted(() => {
      coverStatus.setCoverStatus('close')
    })
    //主机界面数据共享
    const cabinetStore = useCabinet()

    return () => (
      <>
        {cabinetStore.showTerminal ? (
          <div class='w-full h-full' style={`background:url(${client_bg})`}>
            {h(Client, {
              connectInfo: cabinetStore.connection,
              instance: cabinetStore.instance,
              onHidenTerminal: () => {
                cabinetStore.showTerminal = false
              },
            })}
          </div>
        ) : showCover.value === 'start' ? (
          h(Cover)
        ) : (
          h(simulation, {
            onShowCover: (state: boolean) => {
              const cover = state ? 'start' : 'close'
              showCover.value = cover
              coverStatus.setCoverStatus(cover)
            },
          })
        )}
      </>
    )
  },
})
